<template>
  <div class="progress-mask" v-if="progressShow">
    <el-progress class="progress-bar" type="dashboard" :percentage="percentage" :color="colors" />
  </div>
  

  <div class="container">
    
    <el-row class="setting-item" justify="space-between">
      <el-col :span="4"><p>端口号</p></el-col>
      <el-col :span="8" > 
        <el-input-number class="port-input" :disabled="!showEditPort" v-model="portInput" :min="10" :max="65535" ></el-input-number>
        <span
          :class="[showEditPort? 'iconfont icon-yes' : 'iconfont icon-edit', 'icon-port']"
          style="cursor: pointer; margin-left: 10px; "
          @click="changePort"
        ></span>
      </el-col>
    </el-row>


    <el-row class="setting-item" justify="space-between">
      <el-col :span="4">
        <el-tooltip content="该操作会删除文章未引用的图片。 " placement="bottom">
          <p>清理图片缓存</p>
        </el-tooltip>
      </el-col>
      <el-col :span="8" > 
        <el-button type="danger"  @click="cleanImageCache">清理图片缓存</el-button>
      </el-col>
    </el-row>

    
    


  </div>
</template>

<script setup >
import { ref } from 'vue'
import {useConfigStore} from "../stores/config"
import { ElMessageBox, ElMessage } from 'element-plus'
const configStore = useConfigStore()
// -------------------------------进度条--------------------------------
const percentage = ref(0)  
const progressShow = ref(false)
const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]


// --------------------------------端口设置---------------------------
const portInput = ref(15600)
window.api.getVitepressPort().then((port) => {
  portInput.value = port
})

const showEditPort = ref(false)
const changePort = () => {
  if (configStore.runningFlag){
    ElMessageBox.alert('请先关闭服务', '提示', {
      confirmButtonText: '确定',
    })
    return
  }

  if (showEditPort.value) {
    window.api.changePort(portInput.value)
  }
  showEditPort.value = !showEditPort.value;  
}




// --------------------------------清楚图片缓存设置---------------------------
const cleanImageCache = async ()=>{
    await window.api.cleanImageCache()
}

window.api.cleanImageCacheProgress((enevt, progress, totalDelNum)=>{
  progressShow.value = true
  percentage.value = progress
  if (progress == 100){
    setTimeout(()=>{
      progressShow.value = false
      ElMessage.success({message:`清理完成，共清理${totalDelNum}张图片`, duration:1000})
    }, 500)}
})

</script>

<style lang="scss" scoped>
.container {
  padding-top: 20px;
  .setting-item {
    margin-bottom: 20px;
    min-height: 80px;
    align-items: center;
    
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20px;
    border-radius: 15px;
    .icon-edit::before {
      color: gray
    }
    .icon-port::before{
      color: #fefefe
    }

  }
  .port-input {
    border: none !important;
  }
  :deep(.el-input-number__decrease,) {
    color: white !important;
    background-color: black !important;
  }
  :deep(.el-input__wrapper){
    
    background-color: black !important;
  }
  :deep(.el-input__inner){
    color: white !important;
    font-weight: 600 !important;
  }
  :deep(.el-input-number__increase) {
    background-color: black !important;
  }
}


.progress-mask{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  cursor: not-allowed;
  .progress-bar{
    position: fixed;
    left: 45%;
    top: 40%
  }
}

</style>